<template>
  <div>
    <div class="head">
      <div class="search">
        <van-search
          v-model="value"
          clear-trigger="always"
          placeholder="请输入人名、标题、内容等关键字"
        />
        <div class="search-mask" @click="toSearch"></div>
      </div>
      <div class="tab-nav_box" v-if="!search">
        <div
          class="tab-nav_item"
          :class="{ 'tab-nav_item_atv': atvIndex == 0 }"
          @click="sel(0)"
        >
          未处理
        </div>
        <div class="tab-nav_item_boder"></div>
        <div
          class="tab-nav_item"
          :class="{ 'tab-nav_item_atv': atvIndex == 1 }"
          @click="sel(1)"
        >
          已处理
        </div>
      </div>
    </div>
    <div class="home">
      <div style="height: 98px" :class="{ 'head-search': search }"></div>
      <div class="empty-box" v-if="emptyShow">
        <img class="empty-box_img" :src="empty" />
        <div class="empty-box_text">
          {{ search ? "暂无数据" : "暂无数据" }}
        </div>
      </div>
      <div class="item-cell" v-for="i in data" v-else @click="toDetails(i)">
        <div class="item-cell_hd">
          <div class="item-cell_title ellipsis">【{{ i.title }}</div>
          <div class="item-cell_title" style="flex: 1">
            】{{ i.type == 1 ? "财务" : "回款" }}信息审批
          </div>
          <div
            class="item-cell_tag"
            :class="{
              'item-cell_tag_ok': i.status == 2,
              'item-cell_tag_err': i.status == 3,
              'item-cell_tag_processing': i.status == 1,
            }"
          >
            {{
              i.status == 1
                ? "待处理"
                : i.status == 2
                ? "已通过"
                : i.status == 3
                ? "已驳回"
                : ""
            }}
          </div>
        </div>
        <div class="introduce">客户信息: {{ i.customer_name }}</div>
        <div class="introduce">订单金额: {{ i.order_amount }}元</div>
        <div class="introduce-bottom">
          <div style="flex: 1">申请人: {{ i.implement_name }}</div>
          <div>{{ i.create_time }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from "vant";
import { mapGetters, mapActions } from "vuex";

export default {
  name: "Home",
  components: {},
  data() {
    return {
      empty: require("../assets/empty.png"), //列表为空图片
      emptySearch: require("../assets/empty-search.png"), //搜索为空图片
      value: "",
      emptyShow: false,
    };
  },
  computed: {
    atvIndex() {
      return this.$store.getters['invoice/getAtvIndex'];
    },
    data() {
      return this.$store.getters['invoice/getData'];
    },
    review_id() {
      return this.$store.getters.getReview_id;
    },
    search() {
      return this.$store.getters['invoice/getSearch'];
    },
    getValue() {
      return this.$store.getters['invoice/getValue'];
    },
    getIsLogin() {
      return this.$store.getters.getIsLogin;
    },
  },
  methods: {
    //点击切换tab
    sel(index) {
      let vm = this
      vm.$store.commit("invoice/mutationsAtvIndex", index);
      if (!vm.getIsLogin) {
        vm.getAdminInfoByCode();
        return
      }
      this.getIsReviewList();
    },

    //获取url参数
    getCode(url) {
      let param = new Object();
      let str = url.substr(1);
      let strs = str.split("&");
      for (let i = 0; i < strs.length; i++) {
        param[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
      }
      return param;
    },
    //请求列表
    getIsReviewList(loading = true) {
      let vm = this;
      let param = {};
      vm.emptyShow = false;
      param = {
        review_id: vm.review_id,
        status: vm.atvIndex == 0 ? 1 : 2,
      };
      if (loading) {
        Toast.loading({
          duration: 0,
          message: "加载中...",
          overlay: true,
        });
      }
      vm.$request.getIsReviewList(param).then(
        (data) => {
          Toast.clear();
          vm.$store.commit("invoice/mutationsData", data);
          if (data.length == 0) {
            vm.emptyShow = true;
          }
        },
        function (error) {
          Toast.clear();
          Toast.fail("请求失败");
        }
      );
    },
    /**跳转详情
     * demand_id 详情id
     * review_id 用户id
     */
    toDetails(param) {
      console.log(param)
      this.$store.commit("mutationsUrlParam", {
        demand_id:param.demand_id,
        review_type:param.type
      });
      this.$router.push({ name: "details"});
      // window.location.href = `https://starcat-dev.ostyule.club/wx_ost/index.html?demand_id=${param.demand_id}&review_id=${this.review_id}&review_type=${param.type}#/details`;
    },
    toSearch() {
      sessionStorage.removeItem("searchValue");
      sessionStorage.removeItem("searchData");
      this.$router.push({ name: "search" });
    },

    async getAdminInfoByCode() {
      let vm = this;
      Toast.loading({
        duration: 0,
        message: "加载中...",
        overlay: true,
      });
      await this.$store.dispatch("getAdminInfoByCode");
      if (!vm.getIsLogin) {
        Toast.clear();
        Toast.fail("请求失败");
        /// 未登录
        return;
      }
      vm.getIsReviewList(false);
      /// 登录了  继续做些操作
    },
  },
  mounted() {
    document.title = "审批列表";
    let vm = this;
    if (!vm.getIsLogin) {
      vm.getAdminInfoByCode();
    } else {
      vm.getIsReviewList(false);
    }
  },
};
</script>

<style scoped>
.home {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #f8f8f8;
  padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
  padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}
.tab-nav_box {
  height: 44px;
  background-color: #fff;
  display: flex;
  align-items: center;
}
.tab-nav_item {
  font-size: 14px;
  color: #8a929a;
  flex: 1;
  text-align: center;
  height: 100%;
  line-height: 44px;
}
.tab-nav_item_boder {
  width: 1px;
  background-color: #f8f8f8;
  height: 100%;
}
.tab-nav_item_atv {
  color: #110b32;
  position: relative;
}
.tab-nav_item_atv::before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #68a0fc;
  bottom: 0;
}
.item-cell {
  height: 129px;
  margin: 0 12px;
  background-color: white;
  margin-top: 10px;
  border-radius: 8px;
}
.item-cell_hd {
  display: flex;
  align-items: center;
  padding-top: 11px;
}
.item-cell_title {
  color: #1b1e2b;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.item-cell_tag {
  width: 48px;
  height: 19px;
  border-radius: 4px;
  margin-right: 11px;
  font-weight: 500;
  font-size: 12px;
  text-align: center;
  line-height: 19px;
}
.item-cell_tag_ok {
  border: 1px solid #5ec367;
  color: #5ec367;
  background: #f5fff6;
}
.item-cell_tag_processing {
  border: 1px solid #5b97ff;
  color: #5b97ff;
  background-color: #f4fbff;
}
.item-cell_tag_err {
  border: 1px solid #ea6a6a;
  color: #ea6a6a;
  background-color: #fff8f7;
}
.introduce {
  font-size: 13px;
  color: #110b32;
  line-height: 20px;
  margin-top: 6px;
  padding: 0 10px;
}
.introduce-bottom {
  height: 37px;
  padding: 0 10px;
  margin-top: 8px;
  position: relative;
  display: flex;
  align-items: center;
  color: #a6abc0;
  font-size: 12px;
}
.introduce-bottom::before {
  content: " ";
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1px;
  background: #f2f2f2;
  top: 0;
}
.head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
  z-index: 10;
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 160px;
}

.empty-box_img {
  width: 117px;
  height: 100px;
  margin: 0 auto;
  margin-top: 120px;
  display: block;
}
.empty-box_text {
  font-size: 14px;
  font-weight: 500;
  color: #afb4c7;
  line-height: 20px;
  text-align: center;
  margin-top: 9px;
}
.head-search {
  height: 54px !important;
}
.van-search__content {
  border-radius: 6px !important;
}
.search {
  position: relative;
  height: 54px;
}
.search-mask {
  position: absolute;
  left: 10px;
  right: 12px;
  bottom: 12px;
  top: 10px;
}
</style>
